<template>
  <el-header>
    <div class="k-header">
      <router-link to="/" class="k-logo select-none">
        <KSvgIcon
          color="var(--el-bg-color)"
          class="mr-1"
          name="logo"
          width="35px"
          height="35px"
        />
        赵坤编程
      </router-link>
      <el-icon class="icon-btn" @click="settingStore.setAsideWidth">
        <component
          :is="settingStore.asideWidth === '250px' ? 'Fold' : 'Expand'"
        ></component>
      </el-icon>

      <el-tooltip content="刷新" placement="bottom">
        <el-icon @click="handleRefresh" class="icon-btn"><Refresh /></el-icon>
      </el-tooltip>
      <div class="ml-auto flex items-center">
        <el-tooltip content="全屏" placement="bottom">
          <el-icon class="icon-btn" @click="toggle">
            <component :is="!isFullscreen ? 'FullScreen' : 'aim'"></component>
          </el-icon>
        </el-tooltip>
        <el-dropdown class="dropdown" @command="handleCommand">
          <div class="flex items-center text-light-50">
            <el-avatar
              class="mr-2 select-none"
              shape="square"
              :size="25"
              :src="userInfo.avatar"
            />
            <span>{{ userInfo.username }}</span>
            <el-icon class="el-icon--right"><arrow-down /></el-icon>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="rePassWord" icon="Lock">
                修改密码
              </el-dropdown-item>
              <el-dropdown-item command="logout" icon="SwitchButton" divided>
                退出登录
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  </el-header>
  <KDrawer
    destroy-on-close
    append-to-body
    ref="kDrawerRef"
    title="修改密码"
    :close-on-click-modal="false"
    @confirm="handleSubmit"
    btn-confirm-text="提交"
  >
    <el-form
      label-width="80"
      ref="formRef"
      :model="passWordParmas"
      :rules="rules"
    >
      <el-form-item label="旧密码" prop="oldpassword">
        <el-input
          v-model.trim="passWordParmas.oldpassword"
          placeholder="请输入旧密码"
        ></el-input>
      </el-form-item>
      <el-form-item label="新密码" prop="password">
        <el-input
          v-model.trim="passWordParmas.password"
          placeholder="请输入新密码"
        ></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="repassword">
        <el-input
          v-model.trim="passWordParmas.repassword"
          placeholder="请输入确认密码"
        ></el-input>
      </el-form-item>
    </el-form>
  </KDrawer>
</template>
<script setup lang="ts">
const userStore = useUserStore()
const settingStore = useSettingStore()
const { userInfo } = storeToRefs(userStore)
const { isFullscreen, toggle } = useFullscreen()
/**
 * 修改密码
 */
const {
  kDrawerRef,
  kDrawerOpen,
  formRef,
  passWordParmas,
  rules,
  handleSubmit,
} = useRepassword()
/**
 * 退出登录方法
 */
const { handleLogOut } = useOutLogin()
/**
 * 下拉菜单方法
 */
const handleCommand = (value: string) => {
  switch (value) {
    case 'rePassWord':
      kDrawerOpen() //打开抽屉
      break
    case 'logout':
      handleLogOut()
      break
  }
}

/**
 * 刷新方法
 */
const handleRefresh = () => location.reload()
</script>

<style scoped lang="scss">
.el-header {
  padding: 0;
  height: 64px;
}
.k-header {
  @apply flex items-center  bg-indigo-700  text-light-50 h-full;
}
.k-logo {
  width: 250px;
  @apply flex justify-center items-center text-xl font-thin;
}
.icon-btn {
  @apply flex justify-center items-center;
  width: 42px;
  height: 64px;
  cursor: pointer;
  &:hover {
    @apply bg-indigo-600;
  }
}
.k-header .dropdown {
  height: 64px;
  cursor: pointer;
  @apply flex items-center  justify-center mx-5;
}
</style>
